<template>
    <div class="question-list">
        <div v-for="(item, index) in questions" :key="index" class="question-item">
            <div class="question-body">
                <div class="question-header">
                    <div class="question-title">{{ item.title }}</div>
                </div>
                <div class="question-content">
                    <div class="options-grid">
                        <template v-if="item.images && item.images.length">
                            <el-image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" fit="contain"
                                style="height: 100px" />
                        </template>
                    </div>
                </div>
                <div class="options-row">
                    <div v-for="(option, key) in item.options" :key="key" class="option-item">
                        <div class="option-label">{{ key }}</div>
                        <div class="option-content">{{ option }}</div>
                    </div>
                </div>
            </div>
            <div class="question-footer">
                <div class="footer-left">
                    <span class="source">更新时间：{{ item.datetime }}</span>
                    <!-- <span class="source">来源：{{ item.source }}</span> -->
                    <span class="source">难度：{{ item.difficulty }}</span>
                </div>
                <!-- <div class="footer-right">
                    <div class="action-buttons">
                        <el-button type="text" :icon="DocumentCopy">解析</el-button>
                        <el-button type="text" :icon="Star">收藏</el-button>
                        <el-button type="text" :icon="Warning">错题</el-button>
                        <el-button type="text" :icon="Download">下载</el-button>
                        <el-button 
                            type="text" 
                            class="basket-button" 
                            :class="{ 'active': basketStatus[item.id] }"
                            @click="toggleBasket(item.id)"
                        >
                            <el-icon>
                            <component :is="basketStatus[item.id] ? Minus : Plus" />
                            </el-icon>
                            试题篮
                        </el-button>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import { 
  DocumentCopy, 
  Star, 
  Warning, 
  Download, 
  ShoppingCart,
  Plus,
  Minus
} from '@element-plus/icons-vue'


  
  const props = defineProps({
    // 当前选中的知识点
    current: {
      type: Object,
      default: () => ({})
    },
    // 筛选条件
    filters: {
      type: Object,
      default: () => ({})
    }
  })
  
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const questions = ref([])
// 添加试题篮状态控制
const basketStatus = ref({})  // 使用对象存
  // 切换试题篮状态
const toggleBasket = (id) => {
  basketStatus.value[id] = !basketStatus.value[id]
}
  
  // 模拟数据
  const mockQuestions = [
    {
      id: 1,
      type: '选择题',
      difficulty: '易',
      title: '1. 下列图形中，哪一组是相同的？',
      datetime: '2025-04-14 10:00:00',
      images: [
        'https://example.com/math/question1-1.jpg',
        'https://example.com/math/question1-2.jpg'
      ],
      options: {
        A: '第一组',
        B: '第二组',
        C: '第三组'
      }
    },
    {
      id: 2,
      type: '填空题',
      difficulty: '中档',
      title: '2. 在□里填上合适的数。\n 25 + □ = 38',
      datetime: '2025-04-14 10:00:00',
      options: null
    },
    {
      id: 3,
      type: '应用题',
      difficulty: '较难',
      title: '3. 小明有25颗糖果，他分给了小红一些糖果，自己还剩下12颗。小明分给小红多少颗糖果？',
      datetime: '2025-04-14 10:00:00',
      options: null
    },
    {
      id: 4,
      type: '判断题',
      difficulty: '易',
      title: '4. 判断对错：1分钟等于60秒。',
      datetime: '2025-04-14 10:00:00',
      options: {
        A: '对',
        B: '错'
      }
    },
    {
      id: 5,
      type: '计算题',
      difficulty: '中档',
      title: '5. 计算下列算式：\n (1) 125 + 36 = ?\n (2) 89 - 45 = ?',
      datetime: '2025-04-14 10:00:00',
      options: null
    }
  ]
  
  // 获取题目列表
  const fetchQuestions = async () => {
    // TODO: 替换为实际的API调用
    // const { data } = await getQuestions({
    //   page: currentPage.value,
    //   pageSize: pageSize.value,
    //   ...props.filters,
    //   knowledgePoint: props.current.id
    // })
    
    // 模拟API响应
    questions.value = mockQuestions
    total.value = 100
  }
  
  // 页码改变
  const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchQuestions()
  }
  
  // 每页条数改变
  const handleSizeChange = (val) => {
    pageSize.value = val
    fetchQuestions()
  }
  
  // 监听筛选条件变化
  watch(
    () => [props.current, props.filters],
    () => {
      currentPage.value = 1
      fetchQuestions()
    },
    { deep: true }
  )
  
  // 初始加载
  fetchQuestions()
  </script>
  
  <style scoped>
.question-body{
    padding: 16px 16px 8px 16px;
}
  
  .question-list {
    padding: 16px;
    background-color: #fff;
  }
  
  .question-item {
    border: 1px solid #ebeef5;
    border-radius: 4px;

    margin-bottom: 16px;
  }
  
  .question-title {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .question-footer {
    background-color: #f5f7fa;
    padding: 8px 8px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .footer-left {
    display: flex;
    gap: 24px;
    font-size: 13px;
    height: 24px;
    line-height: 24px;
  }
  
  .footer-right {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 24px;
    line-height: 24px;
  }
  
  .options-row {
    display: flex;
    gap: 16px;
  }
  
  .option-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .option-label {
    font-weight: bold;
    color: #333;
  }
  
  .option-content {
    color: #606266;
  }
  
  .action-buttons {
    display: flex;
    gap: 16px;
    margin-left: 24px;
    padding-left: 24px;
    border-left: 1px solid #ebeef5;
  }
  
  :deep(.el-button--text) {
    color: #409EFF;
    font-size: 13px;
    padding: 0;
  }

  :deep(.el-button--text) {
    color: #409EFF;
    font-size: 13px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    }

    :deep(.el-icon) {
    font-size: 14px;
    }

    
.basket-button {
  background-color: transparent !important;
  transition: all 0.3s;
  background-color: #ff9900 !important;
  color: #fff !important;
  width: 70px;
}

.basket-button.active {
  background-color: #ff9900 !important;
  color: #fff !important;
}


:deep(.basket-button .el-icon) {
  font-size: 12px;
  margin-right: 4px;
}
  </style>